<template>
	<div class="add-quality-inspection-container">
		<el-dialog :title="addTitle" :visible.sync="dialogVisible" width="500px" :before-close="closeAddquality">
			<el-form :model="form" :rules="rules" ref="qualityRef" label-width="100px" class="demo-ruleForm" hide-required-asterisk="false" label-position="left">
				<el-form-item label="单项满分" prop="singleScore"> <el-input v-model="form.singleScore"></el-input><span class="score-text">分</span> </el-form-item>
				<el-form-item label="单次未合规扣分" prop="deductScore"><span class="minus">-</span> <el-input v-model="form.deductScore"> </el-input><span class="score-text">分</span> </el-form-item>
				<el-form-item label="单项通过分值" prop="singlePassScore"> <el-input v-model="form.singlePassScore"></el-input> <span class="score-text">分</span> </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeAddquality">取消</el-button>
				<el-button type="primary" @click="sureAddquality" class="sure-btn">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: {
		dialogVisible: {
			require: true,
			type: Boolean,
			default: () => false
		},
		addTitle: {
			require: true,
			type: String,
			default: () => ''
		},
		editFaceComData: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		const validateSingle = (rule, value, callback) => {
			console.log(value, 'validateSingle:');
			let flag = new RegExp('^[0-9]+$', 'g').test(value);
			if (!flag) {
				return callback(new Error('请输入正整数数值'));
			}
			console.log(Number(value));
			if (Number(value) > Number(this.form.deductScore) && this.form.deductScore) {
				// console.log(this.form.deductScore, '222', value);
				this.$refs.qualityRef.validateField('deductScore');
			} else {
				return callback();
			}
			if (Number(value) > Number(this.form.singlePassScore) && this.form.singlePassScore) {
				this.$refs.qualityRef.validateField('singlePassScore');
			} else {
				return callback();
			}
			return callback();
		};
		const validateDeduct = (rule, value, callback) => {
			console.log(this.form.singleScore, 'validateDeduct', value);
			let flag = new RegExp('^[0-9]+$', 'g').test(value);
			if (!flag) {
				return callback(new Error('请输入正整数数值'));
			} else if (Number(value) > Number(this.form.singleScore)) {
				return callback(new Error('单次未合规扣分不得大于单项满分'));
			}
			return callback();
		};
		const validateSinglePass = (rule, value, callback) => {
			console.log(this.form.singleScore, 'validateSinglePass', value);
			let flag = new RegExp('^[0-9]+$', 'g').test(value);
			if (!flag) {
				return callback(new Error('请输入正整数数值'));
			} else if (Number(value) > Number(this.form.singleScore)) {
				return callback(new Error('单项通过分值不得大于单项满分'));
			}
			return callback();
		};
		return {
			form: {
				singleScore: '',
				deductScore: '',
				singlePassScore: ''
			},
			rules: {
				singleScore: [
					{ required: true, message: '请输入单项分值', trigger: 'blur' },
					{ validator: validateSingle, trigger: 'blur' }
				],
				deductScore: [
					{ required: true, message: '请输入单次未合规扣分', trigger: 'blur' },
					{ validator: validateDeduct, trigger: 'blur' }
				],
				singlePassScore: [
					{ required: true, message: '请输入单项通过分值', trigger: 'blur' },
					{ validator: validateSinglePass, trigger: 'blur' }
				]
			}
		};
	},

	mounted() {
		console.log(this.editFaceComData, 'addTitle:', this.addTitle);
		if (this.editFaceComData?.singleScore) {
			this.form = { ...this.editFaceComData };
		}
	},
	methods: {
		closeAddquality() {
			this.$refs['qualityRef'].resetFields();
			this.$emit('closeAddquality');
		},
		sureAddquality() {
			this.$refs['qualityRef'].validate(valid => {
				if (valid) {
					this.$emit('sureAddquality', this.form);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.add-quality-inspection-container {
	position: relative;
	/deep/.el-input__inner {
		width: 88px;
		height: 34px !important;
	}
	.score-text {
		position: absolute;
		top: 0;
		left: 100px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.minus {
		position: absolute;
		top: 0;
		z-index: 10;
		padding: 0 5px;
	}
	.dialog-footer {
		border-radius: 4px;
		.sure-btn {
			background: #6384fe;
		}
	}
	/deep/ .el-dialog__body {
		border-top: 1px solid #ccc;
	}
	/deep/ .el-form-item__label {
		font-size: 12px;
	}
}
</style>
